<template>
	<view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="item.type==TabCur?'text-blue cur':''" v-for="(item,index) in navs"  @tap="tabSelect" :data-id="item.type" :data-index="index">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<scroll-view  scroll-x scroll-with-animation :style="'white-space: nowrap;height: '+isheight+'px;'"  :scroll-left="scrollLeftp" @touchstart="touchStart" @scroll="touchMove" @touchend="touchEnd">
		<view style="display: inline-block;width: 100%;vertical-align: top;" :class="'cuitem'+inde" v-for="(ite,inde) in navs" :key="inde">
			<view class="cu-list menu-avatar" v-if="ite.type=='alipay'">
				<view class="cu-item margin-sm radius" style="background-color:#0081ff;" v-for="(aliitem,aliindex) in accounts.alipay" :key="aliindex">
						<view class="margin-xs cu-avatar round lg" :style="'background-image: url(../../static/alipay.png);'">
						</view>
						<view class="content text-left text-white">
							<view class="margin-xs">支付宝</view>
							<view class="margin-xs">{{aliitem.accounts}}</view>
						</view>
						<view class="action text-xl">
							<text class="cuIcon cuIcon-edit text-white" @tap="edit" :data-index="aliindex"></text>
							<text class="cuIcon cuIcon-delete text-white margin-left-sm margin-right-sm" @tap="deldata" :data-id="aliitem.id" :data-account='aliitem.accounts'></text>
						</view>
				</view>
				<view class="cu-item margin-sm radius" style="border:#b1b1b1 dashed 1px">
					<view class="content text-center" @tap="showModal" data-target="alipay" >
						<text class="cuIcon cuIcon-roundadd margin-right-xs"></text>
						添加支付宝
					</view>
				</view>
			</view>
			<view class="cu-list menu-avatar" v-else-if="ite.type=='bank'">
        <!-- <view class="cu-list menu-avatar"> -->
				<view class="cu-item margin-sm radius" style="background-color:#0081ff;" v-for="(bitem,bindex) in accounts.bank" :key="bindex">
						<view class="margin-xs cu-avatar round lg" :style="'background-image: url(../../static/bank.png);'">
						</view>
						<view class="content text-left text-white">
							<view class="margin-xs">{{bitem.bankName}}</view>
							<view class="margin-xs">{{bitem.accounts}}</view>
						</view>
						<view class="action text-xl">
							<text class="cuIcon cuIcon-edit text-white" @tap="edit" :data-index="bindex"></text>
							<text class="cuIcon cuIcon-delete text-white margin-left-sm margin-right-sm" @tap="deldata" :data-id="bitem.id" :data-account='bitem.accounts'></text>
						</view>
				</view>
				<view class="cu-item margin-sm radius" style="border:#b1b1b1 dashed 1px">
					<view class="content text-center" @tap="showModal" data-target="bank" >
						<text class="cuIcon cuIcon-roundadd margin-right-xs"></text>
						添加银行卡
					</view>
				</view>
			</view>
			<view class="cu-list menu-avatar" v-else>
				<view class="cu-item margin-sm radius" style="background-color:#0081ff;" v-for="(witem,windex) in accounts.weixin" :key="windex">
						<view class="margin-xs cu-avatar round lg" :style="'background-image: url(../../static/weixin.png);'">
						</view>
						<view class="content text-left text-white">
							<view class="margin-xs">{{witem.bankName}}</view>
							<view class="margin-xs">{{witem.accounts}}</view>
						</view>
						<view class="action text-xl">
							<text class="cuIcon cuIcon-delete text-white margin-left-sm margin-right-sm" @tap="deldata" :data-id="witem.id" :data-account='witem.accounts'></text>
						</view>
				</view>
				<view class="cu-item margin-sm radius" style="border:#b1b1b1 dashed 1px">
					<view class="content text-center" @tap="showModal" data-target="weixin" >
						<text class="cuIcon cuIcon-roundadd margin-right-xs"></text>
						添加微信
					</view>
				</view>
			</view>
		</view>
		</scroll-view>
			<view class="cu-modal" :class="modalName=='alipay'?'show':''">
				<view class="cu-dialog" style="width: 70%;">
					<view class="cu-bar bg-white justify-end">
						<view class="content" style="width: auto;">添加支付宝账号</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-sm">
						<view class="">
							<text class="text-orange">只能添加【{{username}}】的支付宝账号</text>
						</view>
						<view class="btns">
							<input placeholder="请输入支付宝账号" name="input" v-model="alipay"></input>
						</view>
						<view class="btns">
							<input placeholder="请再次输入支付宝账号" name="input" v-model="salipay"></input>
						</view>
						<view class="action">
							<button style="width: 80%;" class="cu-btn bg-blue margin-sm" @tap="sub">确定提交</button>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-modal" :class="modalName=='bank'?'show':''">
        <!-- <view class="cu-modal" :class="modalName=='bank'?'show':''"> -->
				<view class="cu-dialog" style="width: 70%;">
					<view class="cu-bar bg-white justify-end">
						<view class="content" style="width: auto;">添加银行卡</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-sm">
						<view class="">
							<text class="text-orange">只能添加【{{username}}】的银行卡账号</text>
						</view>
						<picker mode="selector" :range="banklist" range-key="bankName" :value="sindex" @change="bankset">
							<view class="btns">{{banksname}}</view>
						</picker>
						<view class="btns">
							<input placeholder="请输入银行卡卡号" name="input" v-model="alipay"></input>
						</view>
						<view class="btns">
							<input placeholder="请再次输入银行卡卡号" name="input" v-model="salipay"></input>
						</view>
						<view class="action">
							<button style="width: 80%;" class="cu-btn bg-blue margin-sm" @tap="sub">确定提交</button>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-modal" :class="modalName=='weixin'?'show':''">
				<view class="cu-dialog" style="width: 70%;">
					<view class="cu-bar bg-white justify-end">
						<view class="content" style="width: auto;">添加微信</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-sm">
						<view class="">
							<text class="text-orange">
								使用【{{username}}】的微信号扫描下面二维码关注公众号,即可自动添加微信帐号
		                   </text>
						</view>
						<view class="text-center margin-top-sm margin-bottom-sm">
							<ayQrcode ref="qrcode" qrcode_id="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" :height="200" :width="200"
								            themeColor="#000"/>
						</view>
						<view class="action">
							<text class="text-orange">
								扫码关注,关注后请勿取关,否则无法提现！
							</text>
						</view>
					</view>
				</view>
			</view>
	</view>
</template>
<script>
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
	export default {
	    components: {
	            ayQrcode
	        },
		data() {
			return {
				navs:[],
				tab:0,
				hideQrcode:200,
				modal_qr:true,
				pheight:0,
				url:"",
				sindex:0,
				TabCur:null,//默认显示
				username:null,
				modalName:null,
				alipay:null,//绑定支付宝账号和银行卡账号
				salipay:null,//再次绑定的支付宝账号和银行卡账号
				accounts:[],//银行卡微信支付宝
				editid:null,
				banklist:[],
				banksname:"请选择银行",
				bankid:0,
				isheight:800,
				istouchStart:false,
				onPageScroll:false,
				scrollLeftp:0,
				moveX: 0, //滑动的x轴距离
				like_state: 0, //-1：左滑，0：没滑动，1：右滑
				loading: true
			}
		},
		onLoad(ops) {
			if(ops.type!=null || ops.type!=undefined){
				this.TabCur=ops.type
			}
			this.getData()
			this.getbanks()
			let gv=JSON.parse(uni.getStorageSync("users"))
			if(parseInt(gv.shiming)>0){
				this.username=gv.userReal.name
			}
			let height=0
			uni.getSystemInfo({
				success: (e) => {
					this.isheight=e.windowHeight-80
					this.pheight=e.windowHeight-80
				}
			})
		},
		onBackPress(e){
			let pages = getCurrentPages(); // 当前页面
			let beforePage = pages[pages.length - 2]; // 上一页     
			console.log(beforePage,pages)
			if(typeof(beforePage.$vm.getData) =='function'){
				beforePage.$vm.getData()
			}else{
				console.log("没有该方法")
			}
		},
		methods: {
			bankset(e){
				console.log(e)
				this.sindex=e.detail.value
				this.banksname=this.banklist[this.sindex].bankName
				this.bankid=this.banklist[this.sindex].id
			},
      // 点击列表编辑
			edit(e){
				let index=e.currentTarget.dataset.index;
        console.log(this.accounts[this.TabCur][index]);
				this.alipay=this.accounts[this.TabCur][index].accounts
				this.editid=this.accounts[this.TabCur][index].id
				this.modalName=this.TabCur
				console.log(index)
			},
			getbanks(){
				var that=this
				uni.request({
					url:that.app.apiHost+"/getbanks",
					method:'POST',
					header:{'Authorization':'bearer '+that.app.getAuthCode()},
					success:(res)=>{
						console.log(res.data);
						if(res.data.code == -1){
							that.app.showMsg('请登陆后再操作!','../login/login');
						}
						if(res.data.code==0){
							that.banklist=res.data.data
						}
					},
					fail(res) {
						console.log(res);
					}
				})
			},
			deldata(e){
				let id=e.currentTarget.dataset.id;
				let accounts=e.currentTarget.dataset.account;
				console.log(id,accounts)
				var that=this
				uni.showModal({
					title: '确认删除',
					content: '您确认删除['+accounts+']该账号吗?',
					confirmText:"确认删除",
					success: function (res) {
						if (res.confirm) {
							uni.showLoading({
								mask:true
							})
							uni.request({
								url: that.app.apiHost+"/delbank",
								method:'POST',
								header:{'Authorization':'bearer '+that.app.getAuthCode()},
								data:{id:id},
								success:(res)=>{
									console.log(res.data);
									if(res.data.code == -1){
										that.app.showMsg('请登陆后再操作!','../login/login');
									}
									if(res.data.code==0){
										uni.hideLoading()
										that.app.showMsg('删除成功');
										that.getData()
									}
								},
								fail(res) {
									console.log(res);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getData(){
				var that=this;
				uni.request({
					url: that.app.apiHost+"/accountlist",
					method:'POST',
					header:{'Authorization':'bearer '+that.app.getAuthCode()},
					success:(res)=>{
						console.log(res.data);
						if(res.data.code == -1){
							that.app.showMsg('请登陆后再操作!','../login/login');
						}
						if(res.data.code==0){
							that.accounts=res.data.data.bank//循环银行卡微信和支付宝列表
							that.navs=res.data.data.config//判断顶部选项卡以及底下状态
              that.TabCur=res.data.data.config[0].type //默认选中选项卡
							uni.hideLoading()
							that.loading=true
						}
					},
					fail(res) {
						console.log(res);
					}
				})
			},
      // 顶部点击
			tabSelect(e) {
        console.log(e);
				this.TabCur = e.currentTarget.dataset.id;
				this.tab=e.currentTarget.dataset.index;
        
				this.scrollLeft = (this.tab - 1) * 60
				this.tabchang(this.tab)
			},
			showModal(e) {
				console.log(e)
				this.editid=null
				this.alipay=null
				this.salipay=null
				this.bankid=0
				this.sindex=0
				this.banksname="请选择银行"
				let modelname=e.currentTarget.dataset.target
				var that=this
				if(modelname=="weixin"){
					uni.showLoading({
						mask:true
					})
					uni.request({
						url: that.app.apiHost+"/addwx",
						method:'POST',
						header:{'Authorization':'bearer '+that.app.getAuthCode()},
						success:(res)=>{
							if(res.data.code==-1){
								that.app.showMsg('请登陆后再操作!','../login/login');
							}
							console.log(res.data)
							if(res.data.code==0){
							  that.url=res.data.img
							  console.log(that.url)
							  setTimeout(function() {
							          that.$refs.qrcode.crtQrCode()
							    }, 50)
							  uni.hideLoading()
							  this.modalName = modelname
							}else{
								that.app.showMsg(res.data.msg);
							}
						},
						fail: (e) => {
							console.log(e)
						}
						})
				}else{
					this.modalName = modelname
				}
				
			},
			hideModal(e) {
				this.modalName = null
			},
      // 提交
			sub(){
				var that=this
				console.log(this.TabCur,this.alipay)
				if(this.alipay==null || this.alipay==undefined){
					that.app.showMsg('请输入账号');
					
					return;
				}
				if(this.salipay==null || this.salipay==undefined){
					that.app.showMsg('请再次输入账号');
					
					return;
				}
				if(this.salipay!=this.salipay){
					that.app.showMsg('两次输入账号不一致');
					return;
				}
				if(this.TabCur=='bank' && this.bankid==0){
					that.app.showMsg('请选择银行');
					return;
				}
				
				uni.showLoading({
					mask:true
				})
				uni.request({
					url: that.app.apiHost+"/add"+this.TabCur,
					method:'POST',
					header:{'Authorization':'bearer '+that.app.getAuthCode()},
					data:{accounts:this.alipay,verifyacc:this.salipay,tobank:this.bankid},
					success:(res)=>{
						uni.hideLoading()
						console.log(res.data.data,"aa");
						if(res.data.code == -1){
							that.app.showMsg('请登陆后再操作!','../login/login');
						}
						if(res.data.code==0){
							that.modalName=null
							that.getData()
						}else{
							that.app.showMsg(res.data.msg);
							
						}
					},
					fail(res) {
						console.log(res);
					}
				})
			},
			tabchang(id){
				if(id<0)id=0
				if(id>this.navs.length-1)id=this.navs.length-1
				this.tab=id;
				this.scrollLeft = (this.tab - 2) * 60
				let width=0
				uni.getSystemInfo({
					success: (e) => {
						width=e.windowWidth
					}
				})
				this.scrollLeftp=this.tab  * width
				var that=this
				console.log(".cuitem" + that.tab)
				let info = uni.createSelectorQuery().select(".cuitem" + that.tab);
				　　　  　info.boundingClientRect(function(data) { //data - 各种参数
				         if(that.pheight<data.height)that.isheight=data.height
				　　　  　console.log(data.height)  // 获取元素宽度
				　　    }).exec()
				this.TabCur=this.navs[this.tab].type
			},
			touchStart(event) {
				this.istouchStart=false
					this.startX = Math.abs(event.touches[0].pageX);
					this.startY = event.touches[0].pageY;
					console.log('开始触摸：', this.startX, this.startY);
			},
			touchMove(event) {
				this.istouchStart=true
				var currentX =Math.abs( event.detail.scrollLeft);
				var moveX = currentX - this.startX;
				var text = '';
				var state = 0; //-1：左滑，0：没滑动，1：右滑
				if (event.detail.deltaX < 0) {
					text = '左滑';
					state = 1;
				} else{
					text = '右滑';
					state = -1;
				}
				this.like_state = state;
				this.moveX = moveX;
			},
			touchEnd(event) {
				console.log(this.moveX,this.like_state,this.istouchStart)
				if (Math.abs(this.moveX) > 10 && this.like_state != -100 && this.istouchStart===true) {
					var state = this.like_state
					this.like_state = -100//设置这个数是为了避免滑动之后点击不走touchMove而产生的不正常滑动
					if(state==1){
						this.tabchang(this.tab+1)
					}else{
						this.tabchang(this.tab-1)
					}
					this.moveX=0
				}
			}
		}
	}
</script>
<style>
	.paycss{
		width: 80rpx; height: 80rpx;
		border-radius: 50%;
		padding: 3px;
		background-color: #FFF;
	}
	.paycss image{
		width: 100%;
		height: 100%;
		display: block;
	}
.addcss{
	width: 100%;
	padding: 10px;
	text-align: center;
	height: 220rpx;
	line-height: 220rpx;
}
.addcss .add-main{
	border:1px dashed #b1b1b1;
	border-radius: 5px;
}
.btns{
	width: 90%;
	margin: 15px auto;
	border-radius: 5px;
	padding: 5px 2px;
	background: #FFF;
}
</style>
